<template>
  <div id="main" style="width: 60%; height: 400px"></div>
</template>

<script>
import * as echarts from "echarts";
import { orderAll } from "../../api/hjn/index.js";
export default {
  data() {
    return {
      arr: [],
    };
  },
 
  mounted() {

    orderAll(1, 10).then((ok) => {
      console.log(ok.data.records);
      this.arr = ok.data.records;
      let xdata=()=>{
      let arr1=[]
      for(var v of  ok.data.records){
        arr1.push(v.proname)
      }
      return arr1
      }
      let ydata=()=>{
      let arr2=[]
      for(var v of  ok.data.records){
        arr2.push(v.oriprice*v.bnum)
      }
      return arr2
      }
      echart(xdata,ydata)
    });

    let echart=(xdata,ydata)=>{
    var chartDom = document.getElementById("main");
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      title: {
        text: "成交金额",
        left: "6%",
        textStyle: {
          color: "#666",
          fontWeight: "normal",
          fontSize: "18px",
        },
      },
      xAxis: {
        type: "category",
        data: xdata()
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data:ydata(),
          type: "bar",
        },
      ],
    };

    option && myChart.setOption(option);
    }
    
  },
};
</script>

<style scoped>
</style>